<template>
  <div class="container-bg" v-loading="loading">
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="form"
        size="medium"
        label-width="150px"
        style="max-width: 1200px"
      >
        <el-form-item label="识别模式：">
          <el-radio-group v-model="authMode">
            <el-radio :label="1">单一</el-radio>
            <el-radio :label="0">任意</el-radio>
            <el-radio :label="2">组合</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="authMode === 1" label="对比特征：">
          <el-radio-group v-model="currentFeature">
            <el-radio :label="0">人脸</el-radio>
            <el-radio :label="1">指纹</el-radio>
            <el-radio :label="2">密码</el-radio>
            <el-radio :label="3">IC卡</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-else label="对比特征：">
          <el-checkbox v-model="face_enable" :disabled="authMode === 2 && finger_enable">人脸</el-checkbox>
          <el-checkbox v-model="finger_enable" :disabled="authMode === 2 && face_enable">指纹</el-checkbox>
          <el-checkbox v-model="passwd_enable" :disabled="authMode === 2 && card_enable">密码</el-checkbox>
          <el-checkbox v-model="card_enable" :disabled="authMode === 2 && passwd_enable">IC卡</el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('elForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <div class="tip">
        <p>识别模式为“单一”，比对特征只能选择一种；</p>
        <p>识别模式为“任意”，比对特征可任意选择多种，任意一种验证通过即可；</p>
        <p>识别模式为“组合”，比对特征可任意选择多种，必须同时验证通过；</p>
      </div>
    </el-row>
  </div>
</template>

<script>
import {
  getAuthAggregateApi,
  setAuthAggregateApi
} from "@/api/access/equipment.js";

export default {
  name: "MvCloudgateTerminalAuthAggregate",

  data() {
    return {
      form: {},
      currentFeature: 0,
      authMode: 1,
      face_enable: false,
      card_enable: false,
      passwd_enable: false,
      finger_enable: false,
      loading: false
    };
  },
  created() {
    this.loading = true
    this.getAuthAggregate();
  },
  methods: {
    submitForm() {
      let params = {
        authMode: this.authMode,
        face_enable: this.face_enable ? 1 : 0,
        card_enable: this.card_enable ? 1 : 0,
        passwd_enable: this.passwd_enable ? 1 : 0,
        finger_enable: this.finger_enable ? 1 : 0
      };

      if (this.authMode === 1) {
        if (this.currentFeature === 0) {
          params.face_enable = 1
          params.finger_enable = 0
          params.passwd_enable = 0
          params.card_enable = 0
        } else if (this.currentFeature === 1) {
          params.face_enable = 0
          params.finger_enable = 1
          params.passwd_enable = 0
          params.card_enable = 0
        } else if (this.currentFeature === 2) {
          params.face_enable = 0
          params.finger_enable = 0
          params.passwd_enable = 1
          params.card_enable = 0
        } else if (this.currentFeature === 3) {
          params.face_enable = 0
          params.finger_enable = 0
          params.passwd_enable = 0
          params.card_enable = 1
        } else {
          params.face_enable = 0
          params.finger_enable = 0
          params.passwd_enable = 0
          params.card_enable = 0
        }
      }
      setAuthAggregateApi(params).then((res) => {
        this.$message.success("保存成功");
      });
    },

    getAuthAggregate() {
      getAuthAggregateApi().then(res => {
        const { authMode, face_enable, finger_enable, passwd_enable, card_enable } = res
        this.authMode = authMode
        this.face_enable = !!face_enable
        this.finger_enable = !!finger_enable
        this.passwd_enable = !!passwd_enable
        this.card_enable = !!card_enable

        if (authMode === 1) {
          if (face_enable === 1) {
            this.currentFeature = 0
          } else if (finger_enable === 1) {
            this.currentFeature = 1
          } else if (passwd_enable === 1) {
            this.currentFeature = 2
          } else if (card_enable === 1) {
            this.currentFeature = 3
          }
        }

        this.loading = false
      }).catch(() => {
        this.loading = false
      });
    },
  },
  watch: {
    authMode(val) {
      if (val === 2) {
        if (this.face_enable) this.finger_enable = false
        if (this.passwd_enable) this.card_enable = false
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.tip {
  margin: 90px 0 0 145px;
  color: #d9001b;
}
</style>
